﻿<!DOCTYPE html>
<html>
<!-- 分类按部门进行统计 -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <!--<script src="/static/js/echarts2.0.js"></script>-->
    <script src="/static/js/echarts2.0.js"></script>
    <style>
        body {
            padding-bottom: 10px;
        }

        .toptitle label {
            margin-left: 20px;
        }

        .align_left {
            text-align: left;
        }

        table {
            width: 100%;
            border-top: 0px solid;
            border-left: 0px solid;
            text-align: center;
            border: 1px solid #f7f5f5;
            /*border-right: none;*/
        }

            table td {
                border-right: 0px solid;
                border-bottom: 0px solid;
                border: 1px solid #f7f5f5;
                /*height:38px;*/
                /* padding: 10px; */
            }

        .floatDiv {
            position: fixed;
            top: 10%;
            left: 1px;
            border: 1px solid #ccc;
            background: #EBEEF5;
            cursor: pointer;
            width: 14px;
            font-size: 14px;
            padding: 10px;
        }
    </style>
</head>

<body>
    
<div id="app" v-cloak>   
        <el-form label-position="right" ref="form" :inline="true" :model="formInline" class="demo-form-inline"
                 style="margin-bottom: 15px;">
            <el-row>
                <el-col class="head-tool">
                    <span>
                        <btn :text="col.btnSelect" imgsrc="/static/images/search.png" linetype="3" @click="onSubmit">
                        </btn>

                        <btn :text="change" imgsrc="/static/images/general.png" linetype="4" @click="showdiv_a()">
                        </btn>

                    </span>

                   
                </el-col>
            </el-row>
            <el-row>

                <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{StatisticsbyDepartmentList.StatisticalDateStart+mark.m}}
                                </template>
                                <el-date-picker v-model="formInline.model.StatisticalDateStart" type="date"
                                                slot="suffix" size="mini" placeholder="选择日期">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{StatisticsbyDepartmentList.StatisticalDateEnd+mark.m}}
                                </template>
                                <el-date-picker v-model="formInline.model.StatisticalDateEnd" type="date" slot="suffix"
                                                size="mini" placeholder="选择日期">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{StatisticsbyDepartmentList.classification+mark.m}}
                                </template>
                                <el-select @visible-change="visibleChange" v-model="formInline.model.classification" slot="suffix" :placeholder="StatisticsbyDepartmentList.classification">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in classification" :label="item.value" :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{StatisticsbyDepartmentList.SafeorUnSafe+mark.m}}
                                </template>
                                <el-select @visible-change="visibleChange" v-model="formInline.model.classsafe" slot="suffix" :placeholder="StatisticsbyDepartmentList.SafeorUnSafe">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in classsafe" :label="item.value" :value="item.key">
                                        </el-option>
</el-select>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>
        </el-form>

        <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="50%" style="margin: 0 -1px; display: block; float: left;">
                    <div id="adiv1" style="display:block">
                        <div id="ChartBox1" style="height:250px;margin-top:5px;"></div>
                    </div>
                    <div id="adiv2" style="display:block">
                        <div id="ChartBox3" style="height:250px;margin-top:5px;"></div>
                    </div>

                </td>
                <td width="50%" style="margin: 0 -1px;            display: block; float: left;"  >
                    <div id="ChartBox2" style="height:250px;margin-top:5px;">

                     
                        <!--表格开始-->
                        <el-table stripe ref="table" :data="datapartl" :row-key="getRowKeys" :height="ListItem.tableHeight" border
                                  @selection-change="handleSelectionChange" row-style="height:10px"  style="width: 100%;">
                           
                            <<el-table-column type="index" :label="col.SequenceNumber" :index="indexMethod" width="50">
                            </el-table-column>
                            <el-table-column prop="department"
                                             :label="StatisticsbyDepartmentList.Department">
                            </el-table-column>
                            <el-table-column prop="score"
                                             :label="StatisticsbyDepartmentList.Value">
                            </el-table-column>

                        </el-table>
                        <!--表格结束-->

                    </div>
                </td>
            </tr>
           
           </table>

          

            <!-- 弹出页 -->
            <el-dialog title="履职职责落实情况管理人员添加" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%"
                       height="80%" top="10vh">
                <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
            </el-dialog>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                datapartl: [{ department: "A部门", score: "335" }, { department: "B部门", score: "310" }, { department: "C部门", score: "234" }, { department: "D部门", score: "290" }, { department: "E部门", score: "320" }],
                value1: '',
                //表单内容
                ListItem: ListItem,
                //获取下拉菜单situation
                classification: [],
                classsafe: [],
                change: '图形切换',
                bianhao:'编号',
                formInline: {
                    model: { evaluation: '' },
                    offset: 0,
                    limit: 5
                }
            },
            created: function () {
                //var currApp = this;
                //window.onresize = function () {
                //    currApp.ListItem.tableHeight = window.innerHeight -
                //        currApp.$refs.table.$el.offsetTop - 60;
                //    if (currApp.ListItem.tableHeight < 112) {
                //        currApp.ListItem.tableHeight = 112;
                //    }
                //}
            },
            ounted: function () {

               // console.log(getDicDataArray(["01", "02", "03", "04"]))

                //获取下拉菜单内容
                this.F_PreworkSafetyMeasures = getDicData('55');


                //初始化数据
                this.GetPageData(1);
                //列表高度自适应
                tablehigh(this);
            },
            mounted: function () {

              //  console.log(getDicDataArray(["01", "02", "03", "04"]))

                //获取下拉菜单内容
                this.classification = getDicData('w66');
                this.classsafe = getDicData('safe1');


                //初始化数据
                this.GetPageData(1);
                //列表高度自适应
                tablehigh(this);

                option2 = {

                    color: ['#c23630', '#90c8ae', '#d38365', '#6e7173', '#74a082'],

                    title: {
                        text: '饼形图展示',
                        subtext: '',
                        x:'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical', // 'horizontal'
                        con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                        //itemWidth: 10,  // 设置宽度
                        //itemHeight: 10, // 设置高度
                        //itemGap: 40, // 设置间距

                        x: 'right', // 'center' | 'left' | {number},
                        //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}
                        data: ['A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
                        //data: app.mydata.legend2
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            //data: app.mydata.data2,
                            label: {
                                show: true,
                                formatter: '{b}: {d}%'
                            },
                            data: [
                                {
                                    value: Math.floor(Math.random() * 335),
                                    name: 'A部门',

                                },
                                {
                                    value: Math.floor(Math.random() * 310),
                                    name: 'B部门'
                                },
                                {
                                    value: Math.floor(Math.random() * 234),
                                    name: 'C部门'
                                },
                                {
                                    value: Math.floor(Math.random() * 290),
                                    name: 'D部门'
                                },
                                {
                                    value: Math.floor(Math.random() * 320),
                                    name: 'E部门'
                                }
                            ],

                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                optionZ1 = {
                    title: {
                        text: '柱形图展示',
                        subtext: ''
                    },
                    tooltip: {
                        // trigger: 'axis'
                    },
                    legend: {

                        orient: 'vertical', // 'horizontal'
                        con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                        //itemWidth: 10,  // 设置宽度
                        //itemHeight: 10, // 设置高度
                        //itemGap: 40, // 设置间距

                        x: 'right', // 'center' | 'left' | {number},
                        //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}

                        //data: app.mydata.legend3
                        data: ['A部门', 'B部门', 'C部门','D部门','E部门'],
                    },

                    // calculable: true,
                    xAxis: [

                        // {
                        //     type: 'category',
                        //     axisTick: {
                        //         show: false,
                        //         color: '#707070'
                        //     },
                        //     axisLabel: {
                        //         textStyle: {
                        //             fontSize: 14,
                        //             color: '#4D4D4D'
                        //         }
                        //     },
                        //     axisLine: {
                        //         lineStyle: {
                        //             color: '#707070'
                        //         }
                        //     },
                        //     data: ['低能见度1', '低能见度2', '低能见度3', '低能见度4', '低能见度5', '低能见度6'],
                        // }
                        {
                            type: 'category',
                            data: ['A部门', 'B部门', 'C部门', 'D部门', 'E部门']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'A部门',
                            type: 'bar',
                            barWidth: 66,  // 设置宽度
                            barGap: '-100%',
                            itemStyle: {
                                normal: {
                                    color: '#bfd5c6',
                                }
                            },
                            label: {
                                show: true,
                            },
                            data: [234, null, null, null, null],
                        },
                        {
                            name: 'B部门',
                            type: 'bar',
                            barWidth: 66,  // 设置宽度
                            barGap: '-100%',
                            itemStyle: {
                                normal: {
                                    color: '#90c8ae',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: [null, 310, null, null, null]
                        },
                        {
                            name: 'C部门',
                            type: 'bar',
                            barWidth: 66,  // 设置宽度
                            barGap: '-100%',
                            itemStyle: {
                                normal: {
                                    color: '#bca39a',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: [null, null, 335, null, null]
                        },
                        {
                            name: 'D部门',
                            type: 'bar',
                            barWidth: 66,  // 设置宽度
                            barGap: '-100%',
                            itemStyle: {
                                normal: {
                                    color: '#6e7173',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: [null, null, null, 290, null]
                        },
                        {
                            name: 'E部门',
                            type: 'bar',
                            barWidth: 66,  // 设置宽度
                            barGap: '-100%',
                            itemStyle: {
                                normal: {
                                    color: '#74a082',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: [null, null, null, null, 320]
                        },


                    ]
                };

               
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                indexMethod: function (index) {
                    return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1;
                },
                //关闭Dialog 回调
                closeDialog: function () { closeDialog(this); },
                //删除方法
                onDelete: function () { onDelete(this, '/api/StatisticsbyDepartmentList/DeleteMuti'); },
                //列表选择触发
                handleSelectionChange: function (val) { handleSelectionChange(this, val); },
                //Dialog展示
                UserInput: function (val, id) { DialogShow(this, val, "StatisticsbyDepartmentListInput.html", id); },
                //获取分页数据
                GetPageData: function (currentIndex) {
                    //GetPageData(this, currentIndex, '/api/StatisticsbyDepartmentList/GetList')
                    //this.ListItem.tableData = JSON.parse('[{ department: "a部门", score: "95"  },  { department: "b部门", score: "95" } ,  { department: "c部门", score: "95" }]');
                   // this.ListItem.tableData = JSON.stringify('[{ department: "a部门", score: "95"  },  { department: "b部门", score: "95" } ,  { department: "c部门", score: "95" }]');
                    //console.log(this.ListItem.tableData);

                    //mythis.formInline.offset = (currentIndex - 1) * mythis.ListItem.pagesize;
                    //mythis.formInline.limit = mythis.ListItem.pagesize;
                    //this.ListItem.tableData = '[{ department: "a部门", score: "95"  },  { department: "b部门", score: "95" } ,  { department: "c部门", score: "95" }]';
                    //this.ListItem.total = 5;
                    //console.log(this.ListItem.tableData);
                },
                 
                //查询方法
                onSubmit: function () { onSubmit(this); },
                //pagesize改变 触发方法
                handleSizeChange: function (val) { handleSizeChange(this, val); },
                //跳页触发方法
                handleCurrentChange: function (val) { handleCurrentChange(this, val); },
                //获取下拉菜单数据
                getDropDown: function () {
                },

              

            }
        });
    </script>
    <script type="text/javascript">

       
        var myChart1 = echarts.init(document.getElementById('ChartBox1'));
        var myChart3 = echarts.init(document.getElementById('ChartBox3'));

        //option1 = {
        //    title: {
        //        text: '饼形图展示',
        //        subtext: '',

        //    },
        //    tooltip: {
        //        trigger: 'item',
        //        formatter: "{a} <br/>{b} : {c} ({d}%)"
        //    },

        //    series: [
        //        {
        //            name: '访问来源',
        //            type: 'pie',
        //            radius: '50%',
        //            center: ['15%', '50%'],
        //            data: [
        //                { value: 335, name: 'A部门' },
        //                { value: 310, name: 'B部门' },
        //                { value: 234, name: 'C部门' },

        //            ],
        //            itemStyle: {
        //                emphasis: {
        //                    shadowBlur: 10,
        //                    shadowOffsetX: 0,
        //                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                }
        //            }
        //        }
        //    ]
        //};
       
        //option2 = {

        //    color: ['#c23630', '#90c8ae', '#d38365'],

        //    title: {
        //        text: '饼形图展示',
        //        subtext: '',

        //    },
        //    tooltip: {
        //        trigger: 'item',
        //        formatter: "{a} <br/>{b} : {c} ({d}%)"
        //    },
        //    legend: {
        //        orient: 'vertical', // 'horizontal'
        //        con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

        //        //itemWidth: 10,  // 设置宽度
        //        //itemHeight: 10, // 设置高度
        //        //itemGap: 40, // 设置间距

        //        x: 'right', // 'center' | 'left' | {number},
        //        //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}
        //        data: ['A部门', 'B部门', 'C部门'],
        //        //data: app.mydata.legend2
        //    },
        //    series: [
        //        {
        //            name: '',
        //            type: 'pie',
        //            radius: '55%',
        //            center: ['50%', '60%'],
        //            //data: app.mydata.data2,
        //            label: {
        //                show: true,
        //                formatter: '{b}: {d}%'
        //            },
        //            data: [
        //                {
        //                    value: Math.floor(Math.random() * 335),
        //                    name: 'A部门',

        //                },
        //                {
        //                    value: Math.floor(Math.random() * 310),
        //                    name: 'B部门'
        //                },
        //                {
        //                    value: Math.floor(Math.random() * 234),
        //                    name: 'C部门'
        //                }
        //            ],

        //            itemStyle: {
        //                emphasis: {
        //                    shadowBlur: 10,
        //                    shadowOffsetX: 0,
        //                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                }
        //            }
        //        }
        //    ]
        //};

        ////////////////////////////////optionZ1_begin////////////////////////////

       

        ///////////////////////////////optionZ1_end/////////////////////////////



        myChart1.setOption(option2);
        myChart3.setOption(optionZ1);

        function showdiv_a() {
            if (document.getElementById('adiv1').style.display == 'block') {
                document.getElementById('adiv1').style.display = 'none';
            }
            else {
                document.getElementById('adiv1').style.display = 'block';
            }
            if (document.getElementById('adiv2').style.display == 'block') {
                document.getElementById('adiv2').style.display = 'none';
            } else {
                document.getElementById('adiv2').style.display = 'block';
            }
            
        }

        function showdiv_b() {
            document.getElementById('adiv1').style.display = 'none';
            document.getElementById('adiv2').style.display = 'block';
            //document.getElementById('adiv2').style.resize = 'none';
        }

        document.getElementById('adiv2').style.display = 'none';
    </script>
</body>

</html>